<template>
	<div id="redCardCom" class="ml-hangCard ml-bg-reward-003">
		<p class="top">您有<span>{{leftChance}}</span>次刮奖机会，累计刮到<span>{{userRewards}}</span>元</p>
		<img style="display: none;" id="aaa" src="../img/bg/bg-reward-004@2x.png" alt="" />
		<div class="card-box">
			<div v-if="showChance" class="no-chance">
				<p>抱歉，您暂时还没有刮奖机会</p>
				<div class="ml-icon-reward-002"></div>
				<p v-on:click="goCash">去投资</p>
			</div>
			<div v-if='showTop && !showChance' class="top-top">
				<p>刮开赢大奖</p>
				<p v-on:click="clickRed">点我刮开</p>
			</div>
			<div class="ml-bg-reward-006" id="guaguakaContent">
				<p>恭喜您刮到<span>{{reward}}</span>元奖励金！</p>
				<p>领取的奖励金请到（APP-资产-奖励金）查看</p>
				<p v-on:click="initCard">再刮一次</p>
			</div>
		</div>
	</div>
</template>

<script>
import request from "../config/request.js"	
import judgeSystem from "../config/judgeSystem.js"
import md5 from "../config/md5.js"
import store from '../vuex/store'
export default {
	name: 'hang-card',
	data() {
		return {
			w:null,
			showTop:true,
			system:null,
			detect:null,
			reward:null,
			showChance:true
		}
	},
	props: ['leftChance','userRewards'],
	created() {

	},
	mounted(){
		var self = this;
		var detect = judgeSystem.detect(navigator.userAgent);
		if(detect.os.ios){
			self.system = 'ios';
		}else{
			self.system = 'android';
		}
		this.$data.w=window.innerWidth/2;
		this.initCard();
	},
	updated(){
		if(this.leftChance){
			this.showChance=false;
		}
//		else{
//			this.showChance=true;
//		}
	},
	methods: {
		goCash(){
			this.$emit('go-cash');
		},
		getAll(){
			var self=this;
//			request.getMoney({'activityId':'ActivityDraw201804'},function(data){
//				self.$emit('set-all',data.data);			
//			});
			self.$.ajax({ 
				url:'/fish-backend/apis/activity/info',   //提交的url
				type:'GET',
				beforeSend:function(xhr){		  	        		
				    xhr.setRequestHeader('sid',store.state.sid);
				    xhr.setRequestHeader('softversion',judgeSystem.detect(navigator.userAgent).app.Xylc);
				    xhr.setRequestHeader('appidentifier',self.system);
				    xhr.setRequestHeader('channel','yingyu686');
				    xhr.setRequestHeader('source','web');
				},
				data:{'activityId':'ActivityDraw201804'},
				success:function(data){
					self.$emit('set-all',data.data);
				}
			}); 
		},
		getRedBao(){
			var self=this;
			var _date=new Date().getTime();
			var sign = "_date="+_date+"&activityId=ActivityDraw201804&=!sign_yingyu_686";
			sign = md5.md5(sign).toLocaleLowerCase();
			self.$.ajax({
				url:'/fish-backend/apis/user/activity/takePart',
				type:'POST',
				beforeSend:function(xhr){		 
				    xhr.setRequestHeader('sid',store.state.sid);
				    //xhr.setRequestHeader('sid',localStorage.getItem('sid'));
				    xhr.setRequestHeader('softversion',judgeSystem.detect(navigator.userAgent).app.Xylc);
				    xhr.setRequestHeader('appidentifier',self.system);
				    xhr.setRequestHeader('channel','yingyu686');
				    xhr.setRequestHeader('source','web');
				},
				data:{	
					'_date':_date,
					'activityId':'ActivityDraw201804',
					'sign':sign
				},
				success:function(data){
					self.reward=data.data;
				}
			});
		},
		clickRed(){
			this.showTop=false;	
			this.getRedBao();
//			var redCardCom= document.getElementById("redCardCom");
//			redCardCom.addEventListener("touchmove", function(e) {
//			    e.preventDefault();
//			}, false);
		},
		initCard(){			
			var self=this;
			if(!this.leftChance){
				this.showChance=true;
			}
			this.showTop=true;
			self.$("#guaguakaContent").after('<canvas id="hangCard"></canvas>');
			var hangCard = document.getElementById("hangCard"),
			hangCardCanvas = hangCard.getContext('2d'),
			brushRadius = (hangCard.width / 100) * 5,
			canvasArea = hangCard.width*hangCard.height,			
			img = new Image();
			if (brushRadius < 50) { brushRadius = 50 }
	
			img.onload = function(){  
				hangCardCanvas.drawImage(img, 0, 0, hangCard.width, hangCard.height);
			}
			img.loc = '../img/bg/';
			img.filename = this.$("#aaa").attr("src");
			img.type="png";
			if (window.devicePixelRatio >= 2) {
				var nameParts = img.filename.split('.');
				//img.src = img.loc + nameParts[0]+"-2x"+"."+nameParts[1];
				img.src = img.filename;
			} else {
				img.src = img.filename;
			}
	
			function detectLeftButton(event) {
			    if ('buttons' in event) {
			        return event.buttons === 1;
			    } else if ('which' in event) {
			        return event.which === 1;
			    } else {
			        return event.button === 1;
			    }
			}
	
			function getBrushPos(xRef, yRef) {
				var hangCardRect = hangCard.getBoundingClientRect();
			    return {
				  x: Math.floor((xRef-hangCardRect.left)/(hangCardRect.right-hangCardRect.left)*hangCard.width),
				  y: Math.floor((yRef-hangCardRect.top)/(hangCardRect.bottom-hangCardRect.top)*hangCard.height)
			    };
			}
			      
			function drawDot(mouseX,mouseY){
				//debugger;
				var completed = 0;  
			    var data = hangCardCanvas.getImageData(0,0,self.$data.w,200).data;
			    var total = data.length/4;  
			    var i;  
				hangCardCanvas.beginPath();
			    hangCardCanvas.arc(mouseX, mouseY, 20, 0, 2*Math.PI, true);
			    hangCardCanvas.fillStyle = '#fff';
			    hangCardCanvas.globalCompositeOperation = "destination-out";
			    hangCardCanvas.fill();
			    for(i=3;i<data.length;i+=4){  
			        if(data[i] === 0){  
			          completed +=1;  
			        }  
			    }  
			    if(completed > total*0.8){  
			    	self.$("#hangCard").fadeOut(2000,function(){
			    		self.$("#hangCard").remove();
			    		self.getAll();
			    	});		        
			    } 
			}
	
//			hangCard.addEventListener("mousemove", function(e) {
//				var brushPos = getBrushPos(e.clientX, e.clientY);
//			  	var leftBut = detectLeftButton(e);
//			  	if (leftBut == 1) {
//					drawDot(brushPos.x, brushPos.y);
//			  	}
//			}, false);
						
			hangCard.addEventListener("touchmove", function(e) {
			    e.preventDefault();
			    var touch = e.targetTouches[0];
			    if (touch) {
			    var brushPos = getBrushPos(touch.pageX, touch.clientY);
			        drawDot(brushPos.x,brushPos.y);
			    }
			}, false);
		}
	}
}		
</script>

<style lang="scss">
.ml-hangCard{	   
    margin:20px auto;  
    padding:30px;
    box-sizing: border-box;
    text-align: center;  
    .top{
    	font-family: PingFang-SC-Regular;
		font-size: 30px;
		color: #736A1A;
		letter-spacing: -0.72px;
		span{
			font-family: PingFang-SC-Regular;
			font-size: 36px;
			color: red;
			letter-spacing: -0.72px;
			line-height: 42px;
		}
    } 
    .card-box{
    	margin-top:30px;
    	position: relative; 
    	.no-chance{
    		width:100%;  
		    height: 250px;
		    box-sizing: border-box;
		    position: absolute;  
		    z-index:20;
		    background: #FFFFFF;
		    padding-top:15px;
		    
		    p:first-child{
		    	font-family: PingFangSC-Regular;
				font-size: 34px;
				color: #909090;
				letter-spacing: -0.82px;
				margin-bottom:20px;
		    }
		    p:last-child{
		    	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #3D76FF;
				letter-spacing: -0.72px;
				margin-top:10px;
		    }
    	}
    	.top-top{
    		width:100%;  
		    height: 250px;
		    position: absolute;  
		    z-index:20;
		    p:first-child{
		    	font-family: PingFang-SC-Medium;
				font-size: 48px;
				color: #BCBCBC;
				letter-spacing: -1.16px;
				margin-top:40px;
		    }
		    p:last-child{
		    	font-family: HiraMaruPro-W4;
				font-size: 36px;
				color: #FFFFFF;
				letter-spacing: -0.87px;
				background: #F3381D;
				box-shadow: 0 0 10px 3px rgba(252,58,30,0.20);
				border-radius: 100px;
				width:45%;
				margin:40px auto 0;
				height:75px;
				line-height:75px;
		    }
    	}
    	#guaguakaContent{
	    	width: 100%;  
		    height: 250px;  
		    font-size: 30px;  
		    text-align: center;   
		    color: red;  
		    -webkit-user-select: none; 
		    padding-top:20px;
		    box-sizing: border-box;
		    p:first-child{
		    	font-family: PingFangSC-Regular;
				font-size: 34px;
				color: #F3381D;
				letter-spacing: -0.82px;
				span{
					font-size:50px;
				}
		    }
		    p:nth-child(2){
		    	font-family: PingFangSC-Regular;
				font-size: 24px;
				color: #736B1A;
				letter-spacing: 1.05px;
				width:90%;
				margin:0 auto;
				text-align: center;
				padding:40px 0 0px;
				box-sizing: border-box;
		    }
		    p:last-child{
		    	font-family: HiraMaruPro-W4;
				font-size: 36px;
				color: #FFFFFF;
				letter-spacing: -0.87px;
				background: #F3381D;
				box-shadow: 0 0 10px 3px rgba(252,58,30,0.20);
				border-radius: 100px;
				width:50%;
				margin:20px auto;
				line-height:70px;
		    }
	    }  
	    #hangCard{
	    	position: absolute;  
	      	width: 100%;  
		    height: 250px;    
	      	left: 0;  
	      	top: 0;  
	      	-webkit-user-select: none;  
	    }
    }
}
</style>